<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类式组件</title>
    <!-- 引入react核心库 -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../React-js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转换为js -->
    <script type="text/javascript" src="../React-js/babel.min.js"></script>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <script type="text/babel">
      /**
       *  (1).通过onXxx属性指定事件处理函数(注意大小写)
       *      a. React使用的是自定义(合成事件),而不是使用原生的DOM事件 ———— 为了更好的兼容性
       *      b. React中的事件是通过事件委派方式处理的(委托给组件最外层的元素) ———— 为了高效
       *  (2).通过event.target得到发生事件的DOM元素对象 ———— 不要过度的使用ref
       */
      class MyComponent extends React.Component {
        // 创建ref容器
        myRef = React.createRef();

        textInput = (e) => {
          console.log(e.target);
          console.log(this.myRef.current.value);
        };
        blurInput = (event) => {
          alert(event.target.value);
        };

        render() {
          return (
            <div>
              <input ref={this.myRef} type="text" placeholder="请输入数据" />
              <button onClick={this.textInput}>点我提示输入数据</button>
              <input
                onBlur={this.blurInput}
                type="text"
                placeholder="请输入数据"
              />
            </div>
          );
        }
      }

      ReactDOM.render(<MyComponent />, document.getElementById('test'));
    </script>
  </body>
</html>
